<template>
  <div class="history-page">
    <div class="page-header">
      <h1>处理历史</h1>
      <p>查看您的文件处理记录和结果</p>
    </div>

    <!-- 筛选 -->
    <a-card class="filter-card">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-select v-model:value="filters.type" placeholder="全部类型" allow-clear>
            <a-select-option value="image">图片</a-select-option>
            <a-select-option value="video">视频</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-select v-model:value="filters.status" placeholder="全部状态" allow-clear>
            <a-select-option value="completed">已完成</a-select-option>
            <a-select-option value="processing">处理中</a-select-option>
            <a-select-option value="failed">失败</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="8">
          <a-input v-model:value="filters.search" placeholder="搜索文件名" allow-clear />
        </a-col>
        <a-col :span="4">
          <a-button type="primary" @click="handleSearch">搜索</a-button>
        </a-col>
      </a-row>
    </a-card>

    <!-- 历史记录表格 -->
    <a-card class="history-table-card">
      <a-table
        :columns="columns"
        :data-source="filteredHistory"
        :pagination="pagination"
        :loading="loading"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'fileName'">
            <div class="file-info">
              <div class="file-icon">
                <PictureOutlined v-if="record.type === 'image'" />
                <VideoCameraOutlined v-else />
              </div>
              <div class="file-name">{{ record.fileName }}</div>
            </div>
          </template>
          
          <template v-else-if="column.key === 'type'">
            <a-tag :color="record.type === 'image' ? 'blue' : 'green'">
              {{ record.type === 'image' ? '图片' : '视频' }}
            </a-tag>
          </template>
          
          <template v-else-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
          </template>
          
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button v-if="record.status === 'completed'" type="link" size="small">
                下载
              </a-button>
              <a-button type="link" size="small">查看</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { PictureOutlined, VideoCameraOutlined } from '@ant-design/icons-vue'

const loading = ref(false)

const filters = reactive({
  type: '',
  status: '',
  search: ''
})

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})

// 模拟历史数据
const historyData = ref([
  {
    id: 1,
    fileName: 'sample-image.jpg',
    type: 'image',
    status: 'completed',
    createdAt: '2024-01-15 14:30:00'
  },
  {
    id: 2,
    fileName: 'video-sample.mp4',
    type: 'video',
    status: 'processing',
    createdAt: '2024-01-15 13:45:00'
  },
  {
    id: 3,
    fileName: 'document.png',
    type: 'image',
    status: 'failed',
    createdAt: '2024-01-15 12:20:00'
  }
])

const columns = [
  {
    title: '文件名',
    dataIndex: 'fileName',
    key: 'fileName'
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    key: 'createdAt'
  },
  {
    title: '操作',
    key: 'action'
  }
]

const filteredHistory = computed(() => {
  let filtered = historyData.value

  if (filters.type) {
    filtered = filtered.filter(item => item.type === filters.type)
  }

  if (filters.status) {
    filtered = filtered.filter(item => item.status === filters.status)
  }

  if (filters.search) {
    filtered = filtered.filter(item =>
      item.fileName.toLowerCase().includes(filters.search.toLowerCase())
    )
  }

  return filtered
})

const getStatusColor = (status) => {
  const colorMap = {
    completed: 'success',
    processing: 'processing',
    failed: 'error'
  }
  return colorMap[status] || 'default'
}

const getStatusText = (status) => {
  const textMap = {
    completed: '已完成',
    processing: '处理中',
    failed: '失败'
  }
  return textMap[status] || status
}

const handleSearch = () => {
  // 搜索逻辑
}
</script>

<style scoped>
.history-page {
  max-width: 1200px;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.page-header p {
  color: #666;
  margin: 0;
}

.filter-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.history-table-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-icon {
  font-size: 20px;
  color: #1890ff;
}

.file-name {
  font-weight: 500;
  color: #333;
}
</style> 